<template>
    <div>
        <div class="container block block-alone">
            <div class="header">
                <div class="row header-info-box">
                    <div class="title">被派遣单位</div>
                    <div></div>
                </div>
            </div>
            <div class="row">
                <div class="search">
                    <input
                        type="text"
                        placeholder="请输入单位名称"
                        class="input search-input"
                        v-model="searchText"
                        @keydown.enter="search"
                    />
                    <button class="btn" @click="search">搜索</button>
                    <button class="btn-white" @click="onReset">重置</button>
                </div>
                <div>
                    <!-- <button class="btn" style="width:128px" @click="onAddCompany">添加被派遣单位</button> -->
                </div>
            </div>
            <el-tabs model-value="detail" >
                <div class="table">
                    <el-table
                        :data="tableData"
                        style="width: 100%;"
                        :header-cell-style="{background: '#FBFBFD'}"
                        :header-row-style="{ color: '#202536' }"
                        :row-style="{ color: '#5E617D' }"
                        @selection-change="handleSelectionChange"
                    >
                        <!-- <el-table-column type="index" label="序号" /> -->
                        <el-table-column label="企业名称" width="200px">
                            <template #default="scope">
                                {{ scope.row.wesureInfo.serveCompanyName }}
                            </template>
                        </el-table-column>
                        <el-table-column label="行业">
                            <template #default="scope">
                                {{ scope.row.wesureInfo.industryName || '暂无'}}
                            </template>
                        </el-table-column>
                        <el-table-column label="视频">
                            <template #default="scope">
                                <p
                                    style="color:#1989FA"
                                    class="point"
                                    v-for="(item,index) in scope.row.params.file"
                                    :key="index"
                                >
                                    <a v-if="/(.mp4|.flv|.mov|.wmv|.avi|.mpeg|.rmvb)$/.test(item)" class="left-video-a" style="color:#1989FA;text-decoration:none;" target="_blank" :href="item">点击查看视频</a>
                                    <el-image  style="width: 100px; height: 50px" :src="item" fit="cover" :preview-src-list="[item]" :initial-index="0"  v-if="!/(.mp4|.flv|.mov|.wmv|.avi|.mpeg|.rmvb)$/.test(item)">
                                        <template>
                                            点击查看图片
                                        </template>
                                    </el-image>
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            width="240px"
                            prop="createTime"
                            label="添加时间"
                        />
                        <el-table-column label="状态">
                            <template #default="scope">
                                <div class="decorate-box">
                                    <div class="decorate" :style="{background:scope.row.wesureInfo.auditStatus == 0 ? '#FFC53D' : scope.row.wesureInfo.auditStatus == 1 ? '#00D679' : '#FF7E68'}"></div>
                                    <!--  style="color:#1989FA" -->
                                    <!-- 0未提交审核1已通过2驳回3审核中 -->
                                    <p>
                                        {{ scope.row.wesureInfo.auditStatus == 0 ? '未提交审核' : scope.row.wesureInfo.auditStatus == 1 ? '已通过' : scope.row.wesureInfo.auditStatus == 2 ? '驳回' : scope.row.wesureInfo.auditStatus == 3 ? '审核中' : '' }}
                                    </p>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" prop="remark"></el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <!-- <p
                                    v-if="!scope.row.status"
                                    style="color:#1989FA"
                                    class="point"
                                    @click="
                                        cancelDispatchExamine(scope.row.id)
                                    "
                                >
                                    取消
                                </p> -->
                                <p
                                    v-if="scope.row.wesureInfo.auditStatus !== 3"
                                    style="color:#FF7E68"
                                    class="point"
                                    @click="
                                        deleteDispatchExamine(scope.row.id)
                                    "
                                >
                                    删除
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        class="pagination"
                        v-model:currentPage="pageNum"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 30, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="getPayrollList"
                    >
                    </el-pagination>
                </div>
            </el-tabs>
            <batchPayroll
                v-if="isBatchPay"
                @close="isBatchPay = false"
                @complete="getPayrollList"
                isType="payroll"
            />
        </div>
        <el-dialog
            v-model="centerDialogVisible"
            title="新增被派遣单位"
            width="642px"
            destroy-on-close
            center
        >
            <div class="row">
                <div class="name">
                    <span class="important" style="opacity: -0.9">*</span>
                    上传视频
                </div>
                <div class="upload-box" style="width:100%">
                    <el-upload
                        class="upload-demo"
                        :action="uploadAction"
                        :headers="{Authorization}"
                        :on-success="fileSuccess"
                        :show-file-list=false
                        :on-error="fileEerror"
                        accept="image/jpeg,image/image/png,video/*"
                    >
                        <button class="btn-white-blue" style="width:130px;background:#1989FA;color:#fff;" >
                            <!-- <el-icon><video-camera /></el-icon> -->
                            <i class="el-icon el-icon-camera" />选择视频文件
                        </button>
                    </el-upload>
                    <div class="reveal-file">
                        <div class="file-i" v-for="(item,index) in revealFileList" :key="index" @click="fileRemove(item.uid)">
                            {{ item.name }} <span class="point">×</span>
                        </div>
                    </div>
                    <!-- <div class="upload-introduce">
                        视频时间10s-60s 视频大小不超50M
                    </div> -->
                </div>
            </div>
            <div class="row">
                <div class="name">
                    <span class="important">*</span>
                    被派遣单位
                </div>
                <div style="width:100%">
                    <!-- <el-input placeholder="请输入" style="width:240px" @blur="blurConfirmCode" v-model="dispatchUnit"/> -->
                    <el-select v-model="companyId" filterable placeholder="请选择派遣单位">
                        <el-option
                        v-for="item in companyList"
                        :key="item.id"
                        :label="item.serveCompanyName"
                        :value="item.id"
                        />
                    </el-select>
                </div>
            </div>
            <div class="row">
                <div class="name">
                    <span class="important">*</span>
                    申请理由
                </div>
                <div style="width:100%">
                    <el-input class="remarks-input" v-model="remarksInput" type="text" placeholder="请输入申请理由" />
                </div>
            </div>
            <div class="dialog-btn-box">
                <button class="btn-white" @click="centerDialogVisible=false" style="marginRight:20px">取消</button>
                <button class="btn" @click="addDispatchUnit" style="marginLength:20px">提交审核</button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import global from '@/utils/global'
import { defineComponent } from 'vue'
import { getDispatchExamine, getDispatchList, cancelDispatchExamine, deleteDispatchExamine, getCompanyList } from '@/api/long-insure'
import { BillDetailDto, BillDto } from '@/api/bill'
import batchPayroll from '@/components/batch-payroll.vue'
import { insureDispatchList, insureDispatchDelete, addDispatch } from '@/api/insure-deduction'
export default defineComponent({
    name: 'InsureTeamCompany',
    components: {
        batchPayroll
    },
    data () {
        return {
            Authorization: 'Bearer' + ' ' + global.token,
            uploadAction:
                process.env.VUE_APP_BASE_URL +
                '/rest/period-insur/serve-company/upload', // 上传路径
            isBatchPay: false,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [] as BillDetailDto[],
            searchText: '',
            searchValue: '',
            detailInfo: {} as BillDto,
            selects: [] as string[],
            centerDialogVisible: false, // 弹窗
            fileSize: '',
            fileUrl: '',
            isfileLengt: true,
            dispatchUnit: '', // 派遣单位
            companyList: [] as any, // 所有单位
            companyId: '', // 选择的单位id
            remarksInput: '',
            fileList: [] as {fileSize: string, fileType: string, fileUrl: string, uid:string}[],
            revealFileList: [] as any,
            audioDuration: 0 as any
        }
    },
    created () {
        this.getPayrollList()
        this.getCompanyList()
    },
    methods: {
        // 打开添加派遣单位弹窗
        onAddCompany () {
            this.centerDialogVisible = true
        },
        // 获取所有单位列表
        async getCompanyList () {
            const result = await getCompanyList()
            console.log(this.companyList, 'result获取所有单位列表')
            this.companyList = result.list
        },
        // 取消 派遣段位 审核
        async cancelDispatchExamine (id:string) {
            const result = await cancelDispatchExamine({ id: id })
            await this.getPayrollList()
            this.$message.success('取消成功！')
        },
        // 删除派遣单位
        async deleteDispatchExamine (id: string) {
            console.log(id, 'id')
            await insureDispatchDelete({ id: id })
            await this.getPayrollList()
            this.$message.success('删除成功！')
        },
        async getPayrollList () {
            console.log('点击啦', this.pageSize, this.pageNum, this.searchText)
            const result = await insureDispatchList({
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                serveCompanyName: this.searchValue
            })
            this.total = result.totalCount
            this.tableData = result.list
        },
        handleSizeChange () {
            this.pageNum = 1
            this.getPayrollList()
        },
        search () {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.getPayrollList()
        },
        onReset () {
            this.searchText = ''
            this.search()
        },
        handleSelectionChange (selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
        },
        fileSuccess (response:{code:number, msg:string, data:{fileSize:string, fileUrl:string}}, file: any, fileList: any) {
            if ((file.size / 1024 / 1024) > 30) {
                this.$message.error('视频不可大于30mb')
                console.log(this.revealFileList, 'revealFileList')
                return
            }
            if (this.fileList.length >= 3) {
                this.$message.error('最多支持上传三个')
                return
            }
            if (response.code === 500) {
                this.$message.error(response.msg)
                return
            }
            const arr = []
            if (/video/.test(file.raw.type)) {
                arr.push({
                    fileSize: file.response.data.fileSize,
                    fileType: 'video',
                    fileUrl: file.response.data.fileUrl,
                    uid: file.uid
                })
            }
            if (/image/.test(file.raw.type)) {
                arr.push({
                    fileSize: file.response.data.fileSize,
                    fileType: 'image',
                    fileUrl: file.response.data.fileUrl,
                    uid: file.uid
                })
            }
            this.revealFileList.push({
                url: file.response.data.fileUrl,
                name: file.name,
                uid: file.uid
            })
            this.fileList.push(...arr)
            this.$message.success('上传成功')
        },
        fileEerror () {
            this.$message.error('文件上传失败')
        },
        fileRemove (uid:string) {
            console.log(uid)
            this.fileList = this.fileList.filter(item => item.uid !== uid)
            this.revealFileList = this.revealFileList.filter((item: { uid: string }) => item.uid !== uid)
            console.log(this.fileList, uid, 'event')
        },
        // 被派遣单位
        async addDispatchUnit () {
            console.log(this.companyId, 'companyId')
            if (!this.remarksInput) {
                this.$message.error('请输入申请理由')
                return
            }
            const arr = this.fileList.filter(item => {
                if (/.(mp4|mp3)$/i.test(item.fileUrl)) {
                    return true
                }
            })
            if (arr.length === 0) {
                this.$message.error('请至少上传一个视频')
                return
            }
            const result = await addDispatch({
                serveCompanyId: Number(this.companyId),
                params: {
                    photos: this.fileList
                },
                remark: this.remarksInput,
                applySource: 1
            })
            console.log(result, 'result')
            this.centerDialogVisible = false
            await this.getPayrollList()
            this.$message.success('提交被派遣单位成功')
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.table
    margin-top 0
.header.block{
    padding 20px
}
.basic
    margin-top 20px
.value
    margin-right 30px

.value.important
    color color-red
    font-style italic
:deep().el-tabs__header.is-top
    display inline-block
    margin-top -20px
:deep().el-tabs__nav-scroll
    padding-right 20px
.height-right
    float: right
.download-btn
    width: 126px !important;
.btn-red
    background: #FF7E68
.el-tabs__header
    margin: 0
.block-alone
    padding: 0 24px 0
.decorate-box
    display flex
    align-items center
.decorate
    width 6px
    height 6px
    border-radius 50%
    margin-right 5px
.row
    margin-top 32px
    .name
        width 150px
        font-size 16px
        font-weight 500
.upload-introduce
    margin-left 16px
    color #1989FA
.dialog-btn-box
    display flex
    align-items center
    justify-content center
    margin-top 40px
.remarks-input
    width 222px
.file-i
    margin-top 5px
.header-info-box
    padding-bottom 16px
    box-sizing border-box
    border-bottom 1px solid #F4F4F7
    .title
        font-size 16px
        font-weight 600
        color #3D3D3D
</style>
